<template>
	<view>
		<!-- 页头 -->
		<view class="header bg-gradual-blue" :style="{'padding-top': menuButtonTop}">
			<view class="u-flex" style="justify-content: left;">
				<image src="/static/images/logo-white.png" mode="heightFix" :style="{'height':logoHeight,'weight':logoHeight}"></image>
				<text class="u-font-36 bold-txt u-p-l-6">青猿驿站</text>
			</view>
			<view class="u-text-center u-p-t-60 u-p-b-30 u-flex">
				<text class="u-font-40 u-flex-1 u-text-left">经营数据</text>
				<view class="u-p-t-20"><text class="u-font-24">数据更新于：{{time}}</text></view>
			</view>
			<view class="filter-bar u-flex">
				<view class="item" @click="show = true">
					<!-- <picker @change="" :value="storeType" :range="mystorelist" range-key="packstationname"> -->
						<view>
							<text class="u-p-l-4 u-p-r-10 u-font-24">{{ mydata.mystorename }}</text>
							<u-icon name="arrow-down" color="#fff" size="20"></u-icon>
						</view>
					<!-- </picker> -->
				</view>
				<view class="u-flex-1"></view>
				<view class="item u-m-r-0">
					<picker @change="timeConfirm" :value="timeType" :range="timeList" range-key="label">
						<view>
							<u-icon name="calendar"></u-icon>
							<text class="u-p-l-4 u-p-r-10 u-font-24">{{timeList[timeType].label}}</text>
							<u-icon name="arrow-down" size="20"></u-icon>
						</view>
					</picker>
					<u-calendar v-model="customTime" mode="range" active-bg-color="rgb(16,190,202)" range-bg-color="rgba(16,190,202,0.13)" range-color="rgb(16,190,202)" @change="calendarChange"></u-calendar>
				</view>
			</view>
			<!-- 自定义时间 -->
			<view class="u-flex u-p-t-10" v-if="timeType == 9">
				<view class="u-flex-1"><text class="u-font-24">查询时间范围：</text></view>
				<view><text class="u-font-24">{{startDate}} 至 {{endDate}}</text></view>
			</view>
		</view>
		<!-- 数据展示 -->
		<view class="content">
			<!-- 条件筛选 -->
			<!-- <view class="filter-bar u-flex">
				<view class="item">
					<picker @change="timeConfirm" :value="timeType" :range="timeList" range-key="label">
						<view>
							<u-icon name="calendar"></u-icon>
							<text class="u-p-l-4 u-p-r-10 u-font-24">{{timeList[timeType].label}}</text>
							<u-icon name="arrow-down" size="20"></u-icon>
						</view>
					</picker>
					<u-calendar v-model="customTime" mode="range" active-bg-color="rgb(16,190,202)" range-bg-color="rgba(16,190,202,0.13)" range-color="rgb(16,190,202)" @change="calendarChange"></u-calendar>
				</view>
				<view class="u-flex-1"></view>
				<view class="item">
					<picker @change="confirmMoreType" :value="moreTypeIndex" :range="moreType" range-key="name">
						<u-icon name="grid-fill"></u-icon>
						<text class="u-p-l-4 u-p-r-10 u-font-24">筛选</text>
						<u-icon name="arrow-down" size="20"></u-icon>
					</picker>
				</view>
			</view>
			<view class="u-p-t-30" v-if="timeType == 9">
				<u-alert-tips type="warning" :description="`已选择时间范围：${startDate} 至 ${endDate}`"></u-alert-tips>
			</view> -->
			<!-- 收货数据 -->
			<view class="grid-box">
				<view class="u-p-b-30"><text class="iconfont icon-tongji u-m-r-10"></text><text class="total-title">收货数据</text></view>
				<view class="item">
					<view class="item-t">
						<text class="unit">￥</text>
						<text class="number">{{utils.formatMoney(form.incomeandpay.storagepay)}}</text>
					</view>
					<view class="item-b">
						<text class="title">收货总支出金额(元)</text>
					</view>
					<view class="lower-level">
						<view class="cell" @click="gostatistics(3)">
							<view class="cell-t">站点回收支出(元)</view>
							<view class="cell-b">
								<text class="number">{{utils.formatMoney(form.incomeandpay.offlineorderpay)}}</text>
							</view>
						</view>
						<view class="divider"></view>
						<view class="cell" @click="gostatistics(2)">
							<view class="cell-t">入库支出(元)</view>
							<view class="cell-b">
								<text class="number">{{utils.formatMoney(form.incomeandpay.onlineorderpay)}}</text>
							</view>
						</view>
					</view>
				</view>
				
			</view>
			<!-- 库存比例 -->
			<view class="grid-box">
				<view class="u-p-b-30"><text class="iconfont icon-tongji3 u-m-r-10"></text><text class="total-title">库存比例</text></view>
				<view class="item">
					<view class="lower-level">
						<view class="cell">
							<view class="cell-t">库存重量(KG)</view>
							<view class="cell-b">
								<text class="number">{{form.store.countweight}}</text>
							</view>
							<view>
								<text class="tips-txt">{{ storeDetailsKG.length }}种类型</text>
							</view>
						</view>
						<view class="divider"></view>
						<view class="cell">
							<view class="cell-t">库存数量(件)</view>
							<view class="cell-b">
								<text class="number">{{form.store.countquantity}}</text>
							</view>
							<view>
								<text class="tips-txt">{{ storeDetailsNum.length }}种类型</text>
							</view>
						</view>
					</view>
				</view>
				<view class="item u-m-t-30">
					<view><text class="u-tips-color">按重量回收占比：</text></view>
					<view class="progress-box" :class="on1?'on':''">
						<view class="progress-item" v-for="(item,index) in storeDetailsKG" :key="item.id" @click="getSmallStock(item)">
							<view class="u-flex" style="line-height: 1em;">
								<view class="u-flex-1 name">{{item.name}}</view>
								<view class="number"><text class="u-font-32">{{item.weight}}</text><text class="u-font-24">KG</text></view>
							</view>
							<view class="u-flex u-p-b-10">
								<view class="u-flex-1">
									<u-line-progress :striped="true" :percent="percent(item.weight,form.store.countweight)" :striped-active="true" :show-percent="false" :height="20" active-color="#10beca"></u-line-progress>
								</view>
								<!-- <text class="u-tips-color u-font-24 u-p-l-20">{{percent(item.weight)}}%</text> -->
							</view>
							<view class="u-flex" style="line-height: 1em;">
								<text class="u-tips-color u-font-24 u-flex-1">占比<text class="u-font-bold">{{percent(item.weight,form.store.countweight)}}</text>%</text>
								<text class="u-tips-color u-font-24">
									<!-- <text class="u-p-r-5">查看详细数据</text>
									<text class="iconfont icon-youjiantou u-font-24"></text> -->
								</text>
							</view>
						</view>
						<view class="more u-text-center u-tips-color u-p-t-30 u-p-b-30" v-if="storeDetailsKG.length > 5 && on1 == false" @click="on1 = true">
							<text class="u-p-r-10">查看更多(共{{storeDetailsKG.length}}条)</text>
							<u-icon name="arrow-down" size="20"></u-icon>
						</view>
					</view>
				</view>
				<view class="dashed-line"></view>
				<view class="item u-p-t-30">
					<view><text class="u-tips-color">按数量回收占比：</text></view>
					<view class="progress-box" :class="on2?'on':''">
						<view class="progress-item" v-for="(item,index) in storeDetailsNum" :key="item.id" @click="getSmallStock(item)">
							<view class="u-flex" style="line-height: 1em;">
								<view class="u-flex-1 name">{{item.name}}</view>
								<view class="number"><text class="u-font-32">{{item.weight}}</text><text class="u-font-24">件</text></view>
							</view>
							<view class="u-flex u-p-b-10">
								<view class="u-flex-1">
									<u-line-progress :striped="true" :percent="percent(item.weight,form.store.countquantity)" :striped-active="true" :show-percent="false" :height="20" active-color="#10beca"></u-line-progress>
								</view>
								<!-- <text class="u-tips-color u-font-24 u-p-l-20">{{percent(item.weight,form.store.countquantity)}}%</text> -->
							</view>
							<view class="u-flex" style="line-height: 1em;">
								<text class="u-tips-color u-font-24 u-flex-1">占比<text class="u-font-bold">{{percent(item.weight,form.store.countquantity)}}</text>%</text>
								<text class="u-tips-color u-font-24">
									<text class="u-p-r-5">查看详细数据</text>
									<text class="iconfont icon-youjiantou u-font-24"></text>
								</text>
							</view>
						</view>
					</view>
					<view class="more u-text-center u-tips-color u-p-t-30" v-if="storeDetailsNum.length > 5 && on2 == false" @click="on2 = true">
						<text class="u-p-r-10">查看更多(共{{storeDetailsNum.length}}条)</text>
						<u-icon name="arrow-down" size="20"></u-icon>
					</view>
				</view>
			</view>
		</view>
		<!-- 底部菜单 -->
		<tabbar :current="0"></tabbar>
		<!-- 选择站点列表 -->
		<shopList :show="show" @close="show = false" @replacestore="replacestore" @choose="show = true"></shopList>
	</view>
</template>

<script>
	import tabbar from '../components/tabbar/tabbar.vue'
	import shopList from '../components/shopList/shopList.vue';
	
	export default {
		components:{
			tabbar,
			shopList
		},
		data() {
			return {
				on1: false,
				on2: false,
				menuButtonTop: '44px',
				logoHeight: '32px',
				// 站点选择
				show: false,
				mydata:{
					mystorename: '',
					usename:'',
					franchisename: ''
				},
				// 筛选条件
				customTime: false,
				time: '',
				timeType: 3,
				startDate: '',
				endDate: '',
				timeChooseShow: false,
				timeList: [{
						value: 0,
						label: '全部'
					},
					{
						value: 1,
						label: '今日'
					},
					{
						value: 2,
						label: '昨日'
					},
					{
						value: 3,
						label: '本月'
					},
					{
						value: 4,
						label: '上月'
					},
					{
						value: 5,
						label: '本季度'
					},
					{
						value: 6,
						label: '上季度'
					},
					{
						value: 7,
						label: '本年'
					},
					{
						value: 8,
						label: '上年'
					},
					{
						value: 9,
						label: '自定义'
					}
				],
				// 更多选项
				moreType: [
					// {
					// 	name: '更多',
					// 	value: 0
					// },
				],
				moreTypeIndex: 0,
				on: false,
				// 表单数据
				form:{
					"incomeandpay": {
						"deliversales": 0.0,
						"storagepay": 0.00,
						"onlineorderpay": 0.0,
						"offlineorderpay": 0.0,
						"salesprofit": 0.0
					},
					"store": {
						"countweight": 0.0,
						"countquantity": 0.00,
						"details": []
					},
					"ordernumber": {
						"storageordernumber": 0,
						"waitstorageordernumber": 0,
						"deliverordernumber": 0
					},
					"storagetrend": {
						"countweight": 0.0,
						"countquantity": 0.0,
						"details": []
					},
					"delivertrend": {
						"countweight": 0.0,
						"countquantity": 0.0,
						"details": []
					}
				}
			};
		},
		onLoad() {
			// #ifdef MP-WEIXIN
			this.menuButtonTop = wx.getMenuButtonBoundingClientRect().top + 'px'
			this.logoHeight = wx.getMenuButtonBoundingClientRect().height + 'px'
			// #endif
			
			
			// #ifdef H5
			// this.$u.get('/AIO/Account/GetQRCodeInfo?code=41d5a16a17d44ecda43c762c5f9ce3e9').then((res) => {
			// 	console.log('/AIO/Account/GetQRCodeInfo?code=41d5a16a17d44ecda43c762c5f9ce3e9',res)
			// })
			// #endif
			
			// this.$u.post('/Store/Statistics/SalesProfit',{
			// 	"timeType": 8,
			// 	"start": "",
			// 	"end": "",
			// 	"storeId": 22
			// }).then((res)=>{
			// 	console.log('销售利润',res)
			// })
			// this.$u.post('/Store/Statistics/StorageOrderNumber',{
			// 	"timeType": 0,
			// 	// "start": "",
			// 	// "end": ""
			// }).then((res)=>{
			// 	console.log('入库单量',res)
			// })
			// this.$u.post('/Store/Statistics/OfflineOrderPay',{
			// 	"timeType": 0,
			// 	// "start": "",
			// 	// "end": ""
			// }).then((res)=>{
			// 	console.log('线下单支出',res)
			// })
		},
		computed:{
			storeDetailsKG(){
				return this.form.store.details.filter((item)=>item.isweighing == true).sort((a,b) => b.weight - a.weight)
			},
			storeDetailsNum(){
				return this.form.store.details.filter((item)=>item.isweighing == false).sort((a,b) => b.weight - a.weight)
			}
		},
		methods: {
			back() {
				uni.navigateBack()
			},
			replacestore(item) {
				this.mydata.mystorename = item.mystorename
				this.mydata.franchisename = item.franchisename
				// 获取总览数据
				this.getOperatingData()
			},
			getSmallStock(item){
				uni.navigateTo({
					url: 'waste/waste?id='+item.id+'&name='+item.name+'&isweighing='+item.isweighing
				})
			},
			getOperatingData(){ //获取总览数据
				this.$u.post('/Store/Statistics/OperatingData',{
					endDate: this.endDate,
					startDate: this.startDate,
					timeType: this.timeType,
					storeId: this.storeId
				}).then((res)=>{
					this.form = res
					
					this.time = this.$u.timeFormat(new Date(), 'yyyy-mm-dd hh:MM:ss');
				})
			},
			timeConfirm(e) {
				// 选择时间类型
				this.timeType = e.detail.value
				if (this.timeType == 9) {
					this.customTime = true
				} else {
					this.getOperatingData()
				}
			},
			calendarChange(e) {
				// 选择自定义时间范围
				console.log(e);
				this.startDate = e.startDate
				this.endDate = e.endDate
				this.getOperatingData()
			},
			percent(weight,count) {
				let total = count
				if (total > 0) {
					return Number((weight / total * 100).toFixed(2))
				} else {
					return 0
				}
			},
			// golist(a){
			// 	console.log(a)
			// 	if(a == '出库'){
			// 		uni.navigateTo({
			// 			url: '/pages/outbound/list/list'
			// 		});
			// 	}
			// 	if(a == '入库'){
			// 		uni.navigateTo({
			// 			url: '/pages/income/list/list'
			// 		});
			// 	}
			// 	if(a == '待销售'){
			// 		uni.navigateTo({
			// 		url: '/pages/outbound/list/list'
			// 		});
			// 	}
			// 	if(a == '待入库'){
			// 		uni.navigateTo({
			// 			url: '/pages/income/list/list'
			// 		});
			// 	}
			// },
			// goview(item,it){
			// 	console.log(item)
			// 	if(it == 0){
			// 		uni.navigateTo({
			// 			url:`/pages/home/management/waste/waste`
			// 		})
			// 		return
			// 	}
			// 	uni.navigateTo({
			// 		url: `/pages/home/management/view/view?id=${item.id}&name=${item.name}&it=${it}`
			// 	});
			// },
			// getOperatingData(){ //获取数据
			// 	this.$u.get('/Store/Statistics/OperatingData').then((res)=>{
			// 		this.form = res
			// 	})
			// },
			gostatistics(type) {
				uni.navigateTo({
					url: 'statistics/statistics?type='+type
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	//页头
	.header {
		background-color: #fff;
		padding: 60rpx 30rpx 120rpx 30rpx;
		margin-bottom: 10rpx;
		padding-top: calc(22px + var(--status-bar-height));
		position: relative;
		border-bottom-right-radius: 60rpx;
	
		.head-bar {
			height: 44rpx;
		}
	}
	// 筛选
	.filter-bar {
		display: flex;
		color: #fff;
		// padding: 0 30rpx;
	
		// justify-content: space-between;
		.item {
			background-color: rgba(241, 241, 241, 0.32);
			padding: 8rpx 32rpx;
			border-radius: 28rpx;
			// margin-right: 10rpx;
		}
	}
	// 宫格展示
	.grid-box {
		background-color: #fff;
		margin: 0 30rpx;
		padding: 30rpx;
		border-radius: 12rpx;
		margin-top: 30rpx;
		
		.total-title{
			font-size: 32rpx;
		}
		
		.title {
			font-size: 28rpx;
			color: $u-tips-color;
		}
	
		.number {
			margin-top: 10rpx;
		}
	}
	// 条形进度条显示
	.progress-box{
		.progress-item:nth-child(1),.progress-item:nth-child(2),.progress-item:nth-child(3),.progress-item:nth-child(4),.progress-item:nth-child(5){
			height: initial!important;
			border-bottom: 1px dashed #f1f1f1!important;
			padding-bottom: 20rpx!important;
			padding-top: 20rpx!important;
		}
		&.on{
			>.progress-item{
				height: initial!important;
				border-bottom: 1px dashed #f1f1f1!important;
				padding-bottom: 20rpx!important;
				padding-top: 20rpx!important;
			}
		}
		
		.progress-item {
			border-bottom: 1px dashed #f1f1f1;
			padding-bottom: 20rpx;
			padding-top: 20rpx;
			transition: all 0.3s;
			height: 0;
			overflow: hidden;
			padding: 0;
			border: 0;
			
			.name {
				font-size: 32rpx;
			}

			.number{
				font-weight: inherit!important;
			}
		}
	}
	.content{
		margin-top: -120rpx;
		position: relative;
		padding-bottom: 30rpx;
		.item{
			.item-t{
				margin-bottom: 10rpx;
			}
			.title{
				font-size: 28rpx;
			}
			.unit{
				font-size: 32rpx;
				color: #000;
			}
			.number{
				font-size: 42rpx;
				font-weight: bold;
				color: #000;
			}
		}
		.lower-level{
			display: flex;
			margin-top: 30rpx;
			.cell {
				padding: 10px 0;
				border-radius: 12rpx;
				display: flex;
				flex-direction: column;
				text-align: center;
				background-color: $u-bg-color;
				flex: 1;
				.cell-t{
					margin-bottom: 10rpx;
				}
			}
			
			.divider {
				height: 80rpx;
				background-color: #fff;
				margin: 0 10rpx;
			}
		}
	}
	.dashed-line{
		position: relative;
		left: -30rpx;
		width: 690rpx;
		border-bottom: 1px dashed #e4e7ed;
		&:after{
			content: '';
			width: 28rpx;
			height: 28rpx;
			border-radius: 28rpx;
			background-color: #f7f7f7;
			display: block;
			position: absolute;
			top: -14rpx;
			left: -14rpx;
			
		}
		&:before{
			content: '';
			width: 28rpx;
			height: 28rpx;
			border-radius: 28rpx;
			background-color: #f7f7f7;
			display: block;
			position: absolute;
			top: -14rpx;
			right: -14rpx;
		}
	}
</style>
